<template>
  <div class="promotions">
    <div class="swiper-container swiper-container3">
      <div class="swiper-wrapper">
        <a v-for="(promotion, index) of pro" :key="index" :href="url+'/goods_'+promotion.id+'.htm'" class="promotions-goods swiper-slide">
          <div class="wine-of-promotion" >
            <img :src="promotion.img ? url+promotion.img : 'http://172.25.4.230:8080/upload/img//20170927095426099.jpg'" class="wine-pic">
            <p class="now-price">原价：<del>{{promotion.old_price}}</del>&nbsp;&nbsp;现价：<span v-if="hasHeader">{{promotion.price}}</span><a v-else href="http://www.finewest.cn/user/login.htm">登录可见</a></p>
            <h1>{{promotion.name}}</h1>
            <p>产地：{{promotion.chanqu}}</p>
            <p>等级：{{promotion.grade}}</p>
            <p>库存：{{promotion.inv}}</p>
            <p>亮点：{{promotion.liangdian}}</p>
            <img class="discount" src="../assets/img/discount.png" width="19" height="19">
          </div>
        </a>
      </div>
      <div class="swiper-button-next"><img src="../assets/img/jump.png" width="37" height="37"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'promotions',
    props: ['pro', 'sure', 'Swiper', 'hasHeader'],
    data () {
      return {
        url: 'http://www.finewest.cn'
      }
    },
    updated () {
      var swiper = new Swiper('.swiper-container3', {
        nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        slidesPerView: 2,
        slidesPerGroup: 2,
        onlyExternal: true,
        loop: true,
        onTouchEnd: function () {
          swiper.startAutoplay()
        }
      })
    }
  }
</script>
<style scope lang="scss">
  $p-size: 10px;
  $p-color: #000000;
  .promotions{
    margin-bottom: 4px;
    background: #ffffff;
    .swiper-container{
      overflow: visible;
    }
  }
  .promotions-goods{
    display: block;
    background-color: #ffffff!important;
    width: calc(50%)!important;
    float: left;
    position: relative;
    margin: 10px 0;
    &:nth-child(odd){
       border-right: 1px solid #f5f5f5;
       box-sizing: border-box;
    }
    &:nth-child(even){
       border-left: 1px solid #f5f5f5;
       box-sizing: border-box;
    }
    .wine-of-promotion{
      width: calc(50% - 49px);
      display: table;
      margin: 0 auto;
      p{
        font-size: $p-size;
        color: #555555;
        del{
          font-size: $p-size;
          color: $p-color;
        }
        a{
          font-size: $p-size;
          color: $p-color;
          display: inline;
        }
        span{
          font-size: $p-size;
          color: #e92d46;
        }
      }
      p.now-price{
        white-space:nowrap;
      }
      h1{
        font-size: 10px;
        color: #555555;
      }
      img.wine-pic{
        display: table;
        width: 120px;
        height: 120px;
        margin: 0 auto 10px;
      }
      img.discount{
        position: absolute;
        top: 0;
        left: 10px;
      }
    }
  }
  @media screen and (max-width: 374px) {
    .promotions-goods .wine-of-promotion img.discount{
      position: absolute;
      top: 0px;
      left: 2px;
    }
  }
  .swiper-container.swiper-container3 .swiper-button-next{
    background: none;
    width: 37px;
    height: 37px;
    position: absolute;
    top: -38px;
    right: 0;
    margin-top: 0;
  &:active{
     -webkit-tap-highlight-color:rgba(0,0,0,0);
     -webkit-tap-highlight-color: transparent;
     outline:none;
     background: none;
     text-decoration: none;
   }
  }
</style>
